<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>接口测试工具</title>

<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="stylesheet" href="/static/index.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="/static/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="/static/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css" type="text/css" charset="utf-8">

</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">接口测试工具</a>

            <ul class="nav navbar-nav navbar-left">
                <li><button type="button" id="submit_btn" class="btn btn-sm btn-default navbar-btn" data-loading-text="please wait..."><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> 执行测试 (Esc)</button></li>

                <li><button type="button" id="history_btn" class="btn btn-sm btn-default navbar-btn" data-toggle="modal" data-target="#history_modal"><span class="glyphicon glyphicon-time" aria-hidden="true"></span> 历史记录</button></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">当前书签：</a></li>

                <li>
                    <select class="selectpicker navbar-btn" id="bookmark"></select>
                </li>

                <li><button type="button" id="bookmark_use_btn" class="btn btn-success navbar-btn" data-loading-text="使用中。。。"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 使用</button></li>
                <li><button type="button" id="bookmark_add_btn" class="btn btn-info navbar-btn"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加</button></li>
                <li><button type="button" id="bookmark_edit_btn" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑</button></li>
                <li><button type="button" id="bookmark_drop_btn" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button></li>
            </ul>

        </div>
    </nav>

    <div class="container-fluid content">
        <div class="col-md-6 content-left">

            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline" onsubmit="return false;">
                        <div class="form-group">
                            <label>请求方式：</label>

                            <select class="selectpicker show-tick" id="method" data-width="fit">
                                <option value="GET"     style="background: #5cb85c; color: #fff;">GET</option>
                                <option value="POST"    style="background: #337ab7; color: #fff;">POST</option>
                                <option value="PUT"     style="background: #f0ad4e; color: #fff;">PUT</option>
                                <option value="DELETE"  style="background: #d9534f; color: #fff;">DELETE</option>
                                <option value="PATCH"   style="background: #adff2f; color: #fff;">PATCH</option>
                                <option value="OPTIONS" style="background: #5bc0de; color: #fff;">OPTIONS</option>
                                <option value="HEAD"    style="background: #fba7db; color: #fff;">HEAD</option>
                                <option value="TRACE"   style="background: #7f7f7f; color: #fff;">TRACE</option>
                                <option value="CONNECT" style="background: #40bfbf; color: #fff;">CONNECT</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="url">URL：</label>
                            <input type="text" name="url" id="url" class="form-control" placeholder="http://" style="width: 20em;" />
                        </div>
                    </form>
                </div>
            </div>


            <div class="tabbable panel panel-default">
                <div class="col-xs-2 content-left" id="enctype_left">
                    <strong>Enctype: &nbsp;&nbsp;</strong>
                </div>
                <div class="col-xs-10">
                    <ul id="enctype" class="nav nav-tabs">
                    <li><a href="#enctype_x_www" data-toggle="tab">application/x-www-form-urlencoded</a></li>
                    <li><a href="#enctype_json" data-toggle="tab">text/json</a></li>
                    <li><a href="#enctype_plain" data-toggle="tab">text/plain</a></li>
                    </ul>
                </div>

                <div class="tab-content">
                    <div class="tab-pane fade in active" id="enctype_x_www">
                        <table class="table table-bordered table-condensed">
                            <thead>
                                <th>键：</th>
                                <th>值：</th>
                                <th width="20%">类型：</th>
                                <th width="10%"><button type="button" id="args_add_btn" class="btn btn-sm btn-block btn-info" onclick="args.add()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></th>
                            </thead>
                            <tbody id="args_body">
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade in " id="enctype_json">
                        <textarea id="enctype_json_content" class="form-control" rows="6"></textarea>
                    </div>
                    <div class="tab-pane fade in " id="enctype_plain">
                        <textarea id="enctype_plain_content" class="form-control" rows="6"></textarea>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="title-headers panel-heading"><strong> Headers: </strong></div>
                <table class="table table-bordered table-condensed">
                    <thead>
                        <th>http-equiv:</th>
                        <th>content:</th>
                        <th width="10%"><button type="button" class="btn btn-sm btn-block btn-info" onclick="headers.add()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></th>
                    </thead>
                    <tbody id="headers_body">
                    </tbody>
                </table>
            </div>

            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>压测：</label>
                            <input type="checkbox" class="switch" id="bm_switch" data-size="mini" checked="checked" />
                        </div>
                        <div class="form-group">
                            <label for="boom_n">请求数：</label>
                            <input type="number" name="bm_n" id="bm_n" class="form-control" value="100" />
                        </div>
                        <div class="form-group">
                            <label for="boom_c">并发数：</label>
                            <input type="number" name="bm_c" id="bm_c" class="form-control" value="10" />
                        </div>
                    </form>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>插件：</label>
                            <select class="selectpicker" id="plugin"></select>
                            <button type="button" id="plugin_use_btn" class="btn btn-default">使用</button>
                        </div>
                    </form>
                    <hr />
                    <form id="plugin_panel" class="form-inline">
                    </form>
                </div>
            </div>
        </div>

        <div id="result_panel" class="col-md-6 content-right"></div>

    </div>

    <!-- 添加对话框 -->
    <div class="modal fade" id="add_dialog" tabindex="-1" role="dialog" aria-labelledby="add_dialog_title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="add_dialog_title">添加书签</h4>
                </div>
                <div class="modal-body">
                    <div id="bookmark_add_err" class="alert alert-danger hidden" role="alert"></div>
                    <label for="bookmark_add_input">书签名称：</label>
                    <input type="text" id="bookmark_add_input" class="form-control" placeholder="不要太长哦～" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="bookamrkAddBtn" class="btn btn-primary" data-loading-text="添加中。。。">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认对话框 -->
    <div class="modal fade" id="confirm_dialog" tabindex="-1" role="dialog" aria-labelledby="confirm_dialog_title">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="confirm_dialog_title"></h4>
                </div>
                <div class="modal-body">
                    <p id="confirm_dialog_text"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="confirm_dialog_submit_btn" class="btn btn-primary" data-loading-text="操作中。。。">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹窗 -->
    <div class="modal fade" id="alerter" tabindex="-1" role="dialog" aria-labelledby="alerter_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="alerter_label">警告！</h4>
                </div>
                <div class="modal-body">
                    <p id="alerter_content"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div id="history_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">历史记录</h4>
            </div>
            <div class="modal-body" id="history_panel">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>

    <!-- 模板 -->
    <script id="args_tpl" type="text/x-handlebars-template">
        {{#each Args}}
        <tr>
            <td>
                <input type="text" class="form-control arg-key" value="{{Key}}" />
            </td>
            <td>
                <input type="text" class="form-control arg-value" value="{{Value}}" />
            </td>
            <td>
                <input type="checkbox" class="switch arg-method" data-on-color="success" data-off-color="info" data-on-text="GET" data-off-text="POST" data-size="small" {{#eq Method "GET"}}checked="checked"{{/eq}} />
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-block btn-danger" onclick="args.remove(this)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
            </td>
        </tr>
        {{/each}}
    </script>

    <script id="headers_tpl" type="text/x-handlebars-template">
        {{#each Headers}}
        <tr>
            <td>
                <input type="text" class="form-control header-key" value="{{Key}}" />
            </td>
            <td>
                <input type="text" class="form-control header-value" value="{{Value}}" />
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-block btn-danger" onclick="headers.remove(this)"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
            </td>
        </tr>
        {{/each}}
    </script>

    <script id="bookmark_option_tpl" type="text/x-handlebars-template">
        {{#each Bookmarks}}
        <option value="{{this}}">{{this}}</option>
        {{/each}}
    </script>

    <script id="plugin_option_tpl" type="text/x-handlebars-template">
        {{#each Plugins}}
        <option value="{{@key}}">{{this.DisplayName}}</option>
        {{/each}}
    </script>

    <script id="plugin_panel_tpl" type="text/x-handlebars-template">
        {{#each FieldNames}}
         <div class="form-group">
            <label for="plugin_{{@key}}">{{this}}：</label>
            <input type="text" id="plugin_{{@key}}" class="form-control" />
        </div>
        {{/each}}
    </script>

    <script id="result_tpl" type="text/x-handlebars-template">
        <div class="text-right">
            <button id="result_new_tab_btn" type="button" class="btn btn-default btn-xs"> 在新标签页中浏览 </button>
        </div>
        <div id="result_test_panel"></div>
        <div id="result_header_panel">
            <table class="table table-condensed">
            <tr>
                <th>response status</th>
                <td>{{Status}}</td>
            </tr>
            <tr>
                <th>reqeust url</th>
                <td>{{ReqUrl}}</td>
            </tr>
            {{#neq ReqBody ""}}
            <tr>
                <th>reqeust body</th>
                <td>{{ReqBody}}</td>
            </tr>
            {{/neq}}
            </table>
        </div>
        {{#if Bm}}
        <pre id="result_bm_panel">压测： {{Bm}}</pre>
        {{/if}}
    </script>

    <script id="history_tpl" type="text/x-handlebars-template">
        <table class="table table-striped table-condensed table-hover">
        {{#each History}}
        <tr>
            <td class="text-left"><strong>{{math @index "+" 1}}</strong></td>
            <td class="text-left">{{Method}} {{Url}}</td>
            <td class="text-left"><button class="btn btn-sm btn-link" onclick="historyModel.use({{@index}})">使用</button></td>
        </tr>
        {{/each}}
        </table>
    </script>

    <script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/static/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="/static/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="/static/bower_components/handlebars/handlebars.min.js"></script>
    <script src="/static/bower_components/jquery.hotkeys/jquery.hotkeys.js"></script>
    <script src="/static/json-formater.js"></script>
    <script src="/static/index.js"></script>

</body>

</html>
